<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
    <h1>The Ajax 01 Page</h1>
    <fieldset>
        <legend>Ajax 异步请求</legend>
        <button onclick="doAjaxGet()">Ajax Get Request</button>
        <span id="resultId">Loading data ....</span>
    </fieldset>
 </div>
<script>
      //js中排错方式:断点(debugger),console.log,排除法
      function doAjaxGet(){//这个方法运行于浏览器进程内部的主线程(main)中
          debugger
          //1.创建XHR对象(此对象是ajax技术应用的入口对象,发送异步请求,处理响应结果都是通过此对象实现)
          var xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){//事件监听函数(处理客户端与服务端通过过程中产生的数据)
               //readyState的值0,1,2,3,4
               //0.表示还未执行open方法
               //1.表示已执行open方法但还未执行send方法
               //2.表示已执行send方法
               //3.表示客户端正在接收服务端响应的数据
               //4.表示客户端已经完成响应数据的接收
               if(xhr.readyState==4&&xhr.status==200){//xhr.status==200 表示服务端的处理过程是OK的
                  var result=xhr.responseText;//获取服务端响应的文本数据
                   document.getElementById("resultId").innerHTML=result;
               }
          }
          //3.建立与服务端的连接
          xhr.open("GET","doAjaxGet",true);//true表示异步请求,false表示同步,请求会在main线程发送
          //4.发送请求
          xhr.send(null);//将请求交给ajax引擎
          console.log("do other .....");//run main thread
      }

</script>
</body>
</html>